import React from "react";  
import './party-Layout.css';  
import { Outlet } from "react-router-dom";  
import { NavBar, Toast } from 'antd-mobile';  
import { useNavigate, useLocation } from "react-router-dom";  

export default function PartyLayout() {  
    const navigate = useNavigate();  
    const location = useLocation(); // 获取当前路径信息  

    // 获取当前路由的 meta 信息，包括标题  
    const currentPath = location.pathname.split('/').slice(-1)[0]; // 获取最后一部分路径  
    const route = [  
        { path: 'partyHome', meta: { title: '吃喝玩乐' } },  
        { path: 'switchCities', meta: { title: '切换城市' } }  
    ].find(r => r.path === currentPath); // 在子路由中查找对应的路由  

    const title = route?.meta?.title || ''; // 设置默认标题  

    const back = () => {  
        navigate(-1);  
        Toast.show({  
            content: '点击了返回区域',  
            duration: 1000,  
        });  
    };  

    return (  
        <div className="party-layout">  
            <div className="party-layout-header">  
                <NavBar onBack={back}>{title}</NavBar> {/* 显示动态标题 */}  
            </div>  
            <div className="party-layout-content">  
                <Outlet />  
            </div>  
            <div className="party-layout-footer">  
                <div className="party-footer-left">  
                    <p
                        onClick={()=>{
                            navigate('partyHome')
                        }}
                    >吃喝玩乐</p>  
                </div>  
                <div className="party-footer-right">  
                    <p
                        onClick={()=>{
                            navigate('/order')
                        }}
                    >我的订单</p>  
                </div>  
            </div>  
        </div>  
    );  
}